<template>
  <div class="home">
      <div class="title" v-show="isScroll">danniella</div>
      <div class="home-page">
        <transition name="lsite" appear>
          <div class="content" v-show="fash">
            <div class="official">
              <h2>Welcome to the channel </h2>
              <h1 class="offh">example or Blog </h1>
              <h3>by <img src="../../assets/image/name.png" alt=""></h3>
              <div class="wx"><img src="../../assets/image/wx.png" alt=""></div>
            </div>
          </div>
        </transition>
        <transition name="rsite" appear>
          <div class="pic" v-show="fash">
          </div>
        </transition>
      </div>

 </div>

</template>

<script>
export default {
  data(){
    return{
      fash:true,
      isScroll:false,
      timer:'',
      scrollValue:''

    }
  },
  methods:{
    handleScroll () {
      if(!this.timer){
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
         console.log(scrollTop)
         this.scrollValue = scrollTop
         this.timer = true
         let that = this
         setTimeout(() => {
            that.timer = false
         }, 400);
      }
    }
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll)
          
  },

  computed:{

  },

  watch: {

  }

}  

</script>

<style lang="less" scoped>
@import './index.less';

</style>